<%--
  Created by IntelliJ IDEA.
  User: Al Sah-him
  Date: 2018/7/5
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/global.jsp" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0, user-scalable=0">
<link href="${frontPath}/css/video-js.css" rel="stylesheet">
<script src="${frontPath}/js/video.min.js"></script>
<html>
<head>
    <jsp:include page="../common/include.jsp"/>
    <title>首页</title>
    <style>

        p {
            margin: 0;
            padding: 0;
        }

        .banner {
            background: url("${frontPath}/images/banner1.png") no-repeat;
            height: 100vh;
            width: 100%;
            background-size: cover;
        }

        .commonBg {
            width: 100%;
            /*background: #091a2E;*/
        }

        .buss {
            height: 375px;
        }

        .top-title {
            width: 1190px;
            height: 174px;
            margin: 0 auto;
            padding-top: 63px;
        }

        .title {
            font-size: 33px;
            text-align: center;
            color: #fff;
        }

        .enTitle {
            font-size: 16px;
            color: #889198;
            padding: 9px 0 20px 0;
            text-align: center;
        }

        .line {
            width: 50px;
            height: 2px;
            background: -webkit-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -o-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: -moz-linear-gradient(left, #11343E, #2AD1FD, #11343E);
            background: linear-gradient(left, #11343E, #2AD1FD, #11343E);
            border-radius: 1px;
            margin: 0 auto;
        }

        .content {
            width: 1190px;
            height: 170px;
            margin: 0px auto;
            border-bottom: 1px solid rgba(18, 42, 68, 1);
        }

        .content .box {
            width: calc(100% / 6);
            height: 100%;
            float: left;
        }

        .content .box img {
            width: 66px;
            height: 66px;
            display: block;
            margin: 10px auto;
        }

        .content .box p {
            font-size: 23px;
            color: #fff;
            text-align: center;
            padding-top: 5px;
        }

        .buss {
            height: 390px;
        }

        .buss .content {
            margin: 46px auto;
        }

        .small {
            height: 635px;
        }

        .small .content {
            height: 425px;
            margin: 50px auto 0 auto;
        }

        .html5 .content {
            height: 650px;
            margin: 0px auto;
        }

        .arvr .content {
            width: 100%;
            height: 745px;
            margin: 50px auto 0 auto;
            position: relative;
            border: none;
        }

        .arvr .content .videoBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 588px;
            z-index: 99;
        }

        .arvr .content .play {
            position: absolute;
            top: 159px;
            left: calc((100% - 270px) / 2);
            width: 270px;
            height: 270px;
            z-index: 100;
        }

        .arvr .content .moreWarp {
            width: 1190px;
            height: 133px;
            margin: 22px auto 0 auto;
            color: #3BA7C4;
            border-bottom: 1px solid rgba(18, 42, 68, 1);
        }

        .arvr .content .moreWarp .more {
            float: right;
        }

        .arvr .content .moreWarp .more i {
            display: inline-block;
            width: 0;
            height: 0;
            margin: 0px 0px -2px 8px;
            border-top: 8px solid rgba(0, 0, 0, 0);
            border-right: 8px solid rgba(0, 0, 0, 0);
            border-bottom: 8px solid rgba(0, 0, 0, 0);
            border-left: 8px solid #3BA7C4;
        }

        .partner .content {
            height: 394px;
            margin-top: 20px;
        }

        .say .content {
            height: 462px;
            overflow: hidden;
        }

        .process .content {
            height: 292px;
        }

        .process .content img {
            display: block;
            margin: 0 auto;
            padding-top: 50px;
        }

        .partner .partWrap {
            width: 1190px;
            height: 126px;
        }

        .partner .partWrap .partBox {
            width: calc(100% / 6);
            height: 100%;
            float: left;
        }

        .partner .partWrap img {
            display: block;
            margin: 43px auto;
        }

        .partner .more {
            display: block;
            width: 180px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid #F37A08;
            color: #fff;
            text-align: center;
            line-height: 34px;
            font-size: 14px;
            margin: 20px auto;
            cursor: pointer;
        }

        .say .content .sayWrap {
            width: 3000px;
            height: 275px;
            margin-top: 50px;
            transition: 1s;
        }

        .say .content .says {
            width: calc((1190px - 52px) / 4);
            height: 275px;
            margin-right: 13px;
            border: 1px solid #2AD1FD;
            float: left;
        }

        .say .content .says img {
            width: 64px;
            height: 64px;
            display: block;
            border-radius: 50%;
            margin: 30px auto 20px auto;
        }

        .say .content .says span {
            display: block;
            color: #fff;
            text-align: center;
        }

        .say .content .says .summary {
            color: #84A4D3;
            width: 186px;
            margin: 12px auto;
        }

        .say .content ul {
            display: block;
            margin: 50px auto;
            width: 150px;
        }

        .say .content ul li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #004B61;
            float: left;
            margin-left: 30px;
        }

        .say .content ul .active {
            background: #2AD0FF;
        }

        .small .small-left {
            width: 680px;
            height: 342px;
            position: relative;
            float: left;
        }

        .small .small-left .pc {
            width: 480px;
            height: 342px;
            position: absolute;
            left: 64px;
        }

        .small .small-left .phone {
            width: 135px;
            height: 210px;
            position: absolute;
            right: 60px;
            bottom: 0;
            border-radius: 2px;
            box-shadow: 0px 0px 10px rgba(19, 119, 146, 1);
        }

        .small .small-left .uline {
            width: 60px;
            height: 168px;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .small .small-right {
            width: calc(100% - 680px);
            height: 342px;
            float: right;
            position: relative;
        }

        .small .small-right .subTitle {
            font-size: 24px;
            color: rgba(239, 239, 239, 1);
            line-height: 30px;
            position: absolute;
            bottom: 156px;
            left: 45px;
        }

        .small .small-right .line {
            position: absolute;
            bottom: 140px;
            left: 45px;
        }

        .small .small-right .summ {
            display: block;
            width: 346px;
            position: absolute;
            top: 215px;
            left: 45px;
            font-size: 20px;
            color: rgba(132, 164, 211, 1);
        }

        .html5 .h5left {
            width: 650px;
            height: 460px;
            float: left;
            margin-top: 50px;
        }

        .html5 .h5left .subTitle {
            font-size: 24px;
            color: rgba(239, 239, 239, 1);
            line-height: 30px;
            margin-left: 45px;
        }

        .html5 .h5left .line {
            margin: 20px 45px;
        }

        .html5 .h5left .summ {
            display: block;
            width: 600px;
            font-size: 20px;
            margin-left: 45px;
            color: rgba(132, 164, 211, 1);
        }

        .html5 .reamWrap {
            width: 100%;
            height: 50px;
            margin-top: 30px;
        }

        .html5 .reamWrap .ream {
            font-size: 14px;
            color: rgba(255, 255, 255, 1);
            line-height: 24px;
            margin-left: 45px;
        }

        .html5 .reamWrap .ream img {
            width: 45px;
            height: 45px;
        }

        .html5 .codeWrap {
            width: 103px;
            height: 130px;
            margin-left: 45px;
            text-align: center;
            padding-top: 22px;
        }

        .html5 .codeWrap img {
            width: 103px;
            height: 103px;
            margin-bottom: 9px;
        }

        .html5 .codeWrap span {
            color: rgba(255, 255, 255, 1);
        }

        .html5 .h5right {
            width: calc(100% - 650px);
            height: 460px;
            float: right;
            margin-top: 50px;
        }

        .html5 .imgBg {
            width: 320px;
            height: 460px;
            margin: 0 auto;
            background: url("${frontPath}/images/imgBg.png") no-repeat;
            background-size: cover;
            position: relative;
        }

        .html5 .imgBg img {
            width: 201px;
            height: 352px;
            position: absolute;
            top: calc((100% - 352px) / 2);
            left: 81px;
        }

        /*视频样式开始*/
        .vjs-poster {
            background-size: cover;
        }

        .vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
            margin-left: -135px;
            margin-top: -135px;
        }

        .vjs-default-skin .vjs-big-play-button {
            background: url("${frontPath}/images/play.png") no-repeat !important;
            width: 270px;
            height: 270px;
            border-radius: 50%;
            border: none;
            box-shadow: 0 0 1em rgba(255, 255, 255, 0);
        }

        .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-icon-play:before{
            content: "" !important;
        }

        .vjs-default-skin .vjs-big-play-button:before {
            content: "" !important;
        }

        .vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus {
            box-shadow: 0 0 3em #ffffff40;
        }
        .example_video_1-dimensions{
            width: 100%;
        }
        /*视频样式结束*/
    </style>
</head>
<body>
<jsp:include page="layout/head.jsp"/>
<div class="banner"></div>
<div class="buss commonBg">
    <div class="top-title">
        <p class="title">业务范围</p>
        <p class="enTitle">SCOPE OF BUSINESS</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="box">
            <img src="${frontPath}/images/small.png">
            <p>小程序</p>
        </div>
        <div class="box">
            <img src="${frontPath}/images/h5.png">
            <p>H5定制</p>
        </div>
        <div class="box">
            <img src="${frontPath}/images/arvr.png">
            <p>AR/VR定制</p>
        </div>
        <div class="box">
            <img src="${frontPath}/images/app.png">
            <p>APP开发</p>
        </div>
        <div class="box">
            <img src="${frontPath}/images/building.png">
            <p>网站建设</p>
        </div>
        <div class="box">
            <img src="${frontPath}/images/market.png">
            <p>营销策划</p>
        </div>
    </div>
    <%--<span class="mes" v-if="seen">{{message}}</span>--%>
</div>
<div class="commonBg small">
    <div class="top-title">
        <p class="title">小程序</p>
        <p class="enTitle">SMALL PROGRAM</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="small-left">
            <img src="${frontPath}/images/banner1.png" class="pc"/>
            <img src="${frontPath}/images/banner1.png" class="phone"/>
            <img src="${frontPath}/images/banner1.png" class="uline"/>
        </div>
        <div class="small-right">
            <span class="subTitle">投研社简介</span>
            <p class="line"></p>
            <span class="summ">
                投研社是一家专门为私募提供投资研究
                及延伸服务的机构，倡导“钻研+分享”
                之学习精神。
            </span>
        </div>
    </div>
</div>
<div class="commonBg html5">
    <div class="top-title">
        <p class="title">H5经典案例</p>
        <p class="enTitle">CLASSIC CASE</p>
        <p class="line"></p>
    </div>

    <div class="content">
        <div class="h5left">
            <span class="subTitle">投研社简介</span>
            <p class="line"></p>
            <span class="summ">
                VR类H5，为凤凰古城双年展而打造，利用VR全景技术真实还原了双年展中的艺术精品，手绘动画与配音相结合，对凤凰古城的历史文化加以介绍。
            </span>
            <div class="reamWrap">
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
            </div>
            <div class="reamWrap" style="margin-top: 20px!important;">
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
                <span class="ream">
                    <img src="${frontPath}/images/small.png"/>
                    凤凰古城
                </span>
            </div>
            <div class="codeWrap">
                <img src="${frontPath}/images/banner1.png">
                <span>扫码体验</span>
            </div>
        </div>
        <div class="h5right">
            <div class="imgBg">
                <img src="${frontPath}/images/banner1.png">
            </div>
        </div>
    </div>
</div>
<div class="commonBg arvr">
    <div class="top-title">
        <p class="title">AR/VR定制</p>
        <p class="enTitle">AR/VR ORDER</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
               controls width="100%" height="588"
               poster="${frontPath}/images/banner1.png"
               data-setup='{"example_option":true}'>
            <source src="${frontPath}/video/video.mp4" type='video/mp4'/>
        </video>

        <div class="moreWarp">
            <span class="more font14">MORE<i></i></span>
        </div>
    </div>
</div>
<div class="commonBg partner">
    <div class="top-title">
        <p class="title">合作伙伴</p>
        <p class="enTitle">COOPERATIVE PARTNER</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="partWrap">
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
        </div>
        <div class="partWrap">
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
            <div class="partBox">
                <img src="${frontPath}/images/guang.png">
            </div>
        </div>
        <span class="more">查看更多</span>
    </div>
</div>

<div class="commonBg say">
    <div class="top-title">
        <p class="title">伙伴寄语</p>
        <p class="enTitle">PARTNER MESSAGE</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <div class="sayWrap">
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
            <div class="says">
                <img src="${frontPath}/images/app.png">
                <span class="font12">Max Bianyh</span>
                <span class="font18">LAZ集团首席执行官</span>
                <span class="summary font12">南京凯艾智能公司与LAZ集团成功签约为战略合作伙伴关系非常难得！我们将本着互惠、互促，服务客户的宗旨。</span>
            </div>
        </div>
        <ul class="round">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<div class="commonBg process">
    <div class="top-title">
        <p class="title">合作流程</p>
        <p class="enTitle">COOPERATION PROCESS</p>
        <p class="line"></p>
    </div>
    <div class="content">
        <img src="${frontPath}/images/process.png">
    </div>
</div>

<jsp:include page="layout/foot.jsp"/>
</body>
<script>
    $(function () {

        //导航栏
        initGuide(0);

        //自动轮播开始
        var i=0;
        var len=$(".say .round li").length;
        $(".say .round li").click(function () {
            autoPlay($(this).index());
            clearInterval(time);
            time=setInterval(function () {
                i++;
                autoPlay(i);
                if(i==(len-1)){
                    i=-1;
                }
            },4000);
        });

        //滑动
        function autoPlay(indexs) {
            for(var j=0;j<len;j++){
                if(indexs==j){
                    var setup= j* -1190;
                    $(".sayWrap").css({"margin-left": ""+setup+"px"})
                }
            }
            $(".say .round li").each(function (index,item) {
                if(indexs==index){
                    $(item).addClass("active");
                }else {
                    $(item).removeClass("active");
                }
            });
        }

        var time=setInterval(function () {
            i++;
            autoPlay(i);
            if(i==(len-1)){
                i=-1;
            }
        },4000);
        //自动轮播结束

        $(window).scroll(function () {
            var scrollTop=$(document).scrollTop();
            var height=$(".banner").height() - 67;
            if(scrollTop > height){
                $(".headWrap").addClass("bgBlue");
            }else {
                $(".headWrap").removeClass("bgBlue");
            }
        });
    });
</script>
</html>
